  const webpackMerge = require('webpack-merge');
    const webpack = require('webpack');
    const ChunkManifestPlugin = require('chunk-manifest-webpack-plugin');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const WebpackDevServer = require("webpack-dev-server");
    const ip = require('ip').address();
    const baseConfig = require('./webpack/base');
    const config = require('./webpack/config');
    const defPath = config.defPath;
    const APP_PATH = defPath.APP_PATH;

    // 使用 `webpack-merge` 将基础配置和新配置合并
    module.exports = webpackMerge(baseConfig(), {
        devtool: 'cheap-module-source-map', // 增强浏览器调试
        entry: {    // 入口
            app: [  // 热加载配置
                // 'react-hot-loader',
                'webpack-dev-server/client?http://' + ip + ':8000',
                'webpack/hot/only-dev-server',
                defPath.ENTRY_PATH
            ],
            vendor: config.vendor   // 公共文件单独打包
        },
        output: {   // 出口
            path: defPath.DEV_PATH,     // 所有输出文件的目标路径
            // 所有输出文件的目标路径
            filename: 'js/bundle.js',   // 输出文件命名
            publicPath: '/',        // 必须写，且与 devServer 的 publicPath 保持一致
            chunkFilename: 'js/[name].js'  // 分块文件命名
        },
        module: {
            rules: [ 
                {
                    test:/\.html$/,
                    use: {
                        loader: 'html-loader'
                    }
                },
                {    
                    test: /\.js$/,    
                    exclude: /node_modules/,     
                    use: {
                    loader: 'babel-loader',
                    query: {
                        presets: ["es2015"]
                        }
                    }    
                },
                // 配置加载器
                {
                    test: /\.(less|css)$/,
                    include: APP_PATH,  //  必须匹配选项
                    use: [      // 2.x 版本改为 use 代替 loaders，必须加 -loader
                        'style-loader', 'css-loader', 'postcss-loader','less-loader' + config.sassLoaderConfig
                    ]
                }, 
                {
                    test: /\.(eot|woff|woff2|ttf|svg|png|jpe?g|gif|mp4|webm)(\?\S*)?$/,
                    include: APP_PATH,
                    loader: 'url-loader?limit=8192&name=images/[name].[ext]'
                }
            ]
        },
        plugins: [
            // 热模块替换相关插件
            new webpack.HotModuleReplacementPlugin(),
            new webpack.NamedModulesPlugin(),
            // 定义环境变量
            new webpack.DefinePlugin({
                'process.env.NODE_ENV': JSON.stringify('development')
            }),
            /* 
                公用模块单独打包，对应 入口文件 vendor,
                持久化缓存配置 
            */
            new webpack.optimize.CommonsChunkPlugin({
                names: [    // 提取公共模块名称
                    'vendor' // manifest 用于分离 webpack runtime 
                ],
                filename: 'js/[name].js', // 公共模块文件名
                minChunks: Infinity     // Infinity 表示仅仅创建公共组件块，不会把任何modules打包进去。
            }),
          //   new ChunkManifestPlugin({   // 将 manifest 提取到一个单独的 JSON 文件中
          //    filename: 'chunk-manifest.json',
          //    manifestVariable: 'webpackManifest' // 全局变量的名称，webpack 将利用它查找 manifest JSON 对象
          // })
        ],
        devServer: {    // 开启服务器
            contentBase: defPath.DEV_PATH,
            publicPath: '/',
            historyApiFallback: true,
            clientLogLevel: 'none',
            host: ip,
            port: 8000,
            open: true,
            hot: true,
            inline: true,
            compress: true,
            stats: {
                colors: true,
                errors: true,
                warnings: true,
                modules: false,
                chunks: false
            }
        }
    })